import React from "react";
import { RootDispatch, RootState, MapStateFromStoreProps, MapDispatchFromStoreProps, RouterProps } from "@src/store";
import { connect } from "@store/connect";
import ThreeSpace from "@src/views/threeSpace";
import loginLine from "@assets/images/login_horizontal_line.png";
import { Input, Button, message } from "antd";
import { UserOutlined, EyeInvisibleOutlined, EyeOutlined } from "@ant-design/icons";
import human from "@assets/images/login_human.png";
import "./style.css";

function mapStateToProps(state: RootState) {
  const { global, loading, router } = state;
  console.log("loading::", loading);
  console.log("router::", router);
  return { ...global, ...loading };
}

function mapDispatchToProps(dispatch: RootDispatch) {
  const { global, loading } = dispatch;
  console.log(loading);
  return {
    fetchLogin: global.fetchLogin,
    showLoading: loading.show,
  };
}

/**
 * 组件最终接收的所有 Props 类型声明
 */
type LoginProps = RouterProps &
  MapStateFromStoreProps<typeof mapStateToProps> &
  MapDispatchFromStoreProps<typeof mapDispatchToProps> & {
    routes?: any;
    count?: number;
  };
type LoginState = {
  userName: string;
  passWorld: string;
};

@connect(mapStateToProps, mapDispatchToProps)
export default class Login extends React.Component<LoginProps, LoginState> {
  constructor(props) {
    super(props);
    this.state = {
      userName: "",
      passWorld: "",
    };
  }

  login = async (): Promise<void> => {
    console.log(this.props);
    const { userName, passWorld } = this.state;
    if (!userName) {
      return message.error("请输入账号~");
    }
    if (!passWorld) {
      return message.error("请输入密码~");
    }
    const { fetchLogin } = this.props;
    message.loading({ content: "正在登录中...", key: "updatable" });
    await fetchLogin(this.state);
    return message.success({ content: "登录成功~", key: "updatable", duration: 2 });
  };

  changeValue = (e) => {
    const { value, name } = e.target;
    this.setState({
      [name]: value,
    } as Pick<LoginState, typeof name>);
  };

  render() {
    const { global } = this.props;
    const { userName, passWorld } = this.state;
    return (
      <div className="login-page">
        <ThreeSpace />
        <div className="form">
          <img className="human" src={human} alt="" />
          <p className="title">欢迎登录</p>
          <img className="line" src={loginLine} alt="" />
          <div className="form-wrap">
            <div className="form-data">
              <Input
                value={userName}
                name="userName"
                onChange={this.changeValue}
                size="large"
                className="input"
                placeholder="请输入账号"
                prefix={<UserOutlined style={{ color: "#1890ff" }} />}
              />
            </div>
            <div className="form-data">
              <Input.Password
                value={passWorld}
                onChange={this.changeValue}
                name="passWorld"
                size="large"
                className="input"
                placeholder="请输入密码"
                prefix={<UserOutlined style={{ color: "#1890ff" }} />}
                iconRender={(visible: boolean) =>
                  visible ? (
                    <EyeOutlined style={{ color: "#1890ff" }} />
                  ) : (
                    <EyeInvisibleOutlined style={{ color: "#ffff" }} />
                  )
                }
              />
            </div>
            <div className="form-data submit">
              <Button type="primary" loading={global} block onClick={this.login}>
                登录
              </Button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
